<template>
  <div class="index">
    <a-header title='彩票开奖'></a-header>
    <div class="container has-header">
      <div class="has-nav">
        <div class="banner-con">
            <d-banner></d-banner>
        </div>
        <div class="nav-con">
          <ul class="nav-list">
            <li :class="{'active':navCurren==0}" @click='hanldNav(0)'>全国</li>
            <li :class="{'active':navCurren==1}" @click='hanldNav(1)'>地方</li>
            <li :class="{'active':navCurren==2}" @click='hanldNav(2)'>高频</li>
          </ul>
        </div>
        <div class="lotter-con show">
            <div class="lotter-con-item" v-show='navCurren==0'>
                <template v-for='item in dataList' >
                    <a-list :data='item'></a-list>
                </template>
            </div>
            <div class="lotter-con-item" v-show='navCurren==1'>
                <div class="gp-list" v-if='dfCookie.length>0'>
                    <div class="lotter-tit">最近查看</div> 
                    <div class="gp-btnbox">
                        <div class="gp-tag" v-for='item in dfCookie'>
                            <p>{{item}}</p>
                        </div>
                    </div>
                </div>
                <!--所在地-->
                <div>
                    <div class="lotter-tit">定位您当前所在位置：<em>{{CurrentProvinces}}</em></div> 
                    <div class="place-list">
                        <div @click='placeCurrenState1 = !placeCurrenState1' :class="{'place-tit':true,'active':placeCurrenState1}">{{CurrentProvinces}}</div> 
                        <div :class="{'place-box':true,'active':placeCurrenState1}">
                            <a-list v-for='(item,index) in currentData1' :key='index' :data='item' @click.native='getCookie("df",items.name)'></a-list>
                        </div>
                    </div>
                </div>
                <!--其他彩种-->
                <div>
                    <div class="lotter-tit">其他地方彩种</div>
                    <template v-for='item in otherData'>
                        <div class="place-list">
                            <div 
                                :class="{'place-tit':true,'active':item.state}"
                                @click='item.state = !item.state'
                                >{{item.palceName}}</div>
                            <div 
                                :class="{'place-box':true,'active':item.state}"
                                >
                                <a-list v-for='(items,index) in item.lotterList' :key='index' :data='items' @click.native='getCookie("df",items.name)'></a-list>
                            
                            </div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="lotter-con-item" v-show='navCurren==2'>
                <div class="gp-list" v-if='gpCookie.length>0'>
                    <div class="lotter-tit">最近查看</div> 
                    <div class="gp-btnbox">
                        <div class="gp-tag" v-for='item in gpCookie'>
                            <p>{{item}}</p>
                        </div>
                    </div>
                </div>
                <!--所在地-->
                <div>
                    <div class="lotter-tit">定位您当前所在位置：<em>{{CurrentProvinces}}</em></div> 
                    <div class="place-list">
                        <div @click='placeCurrenState2 = !placeCurrenState2' :class="{'place-tit':true,'active':placeCurrenState2}">{{CurrentProvinces}}</div> 
                        <div :class="{'place-box':true,'active':placeCurrenState2}">
                            <a-list v-for='(item,index) in currentData2' :key='index' :data='item' @click.native='getCookie("gp",items.name)'></a-list>
                        </div>
                    </div>
                </div>
                <!--其他彩种-->
                <div>
                    <div class="lotter-tit">其他地方彩种</div>
                    <template v-for='item in higtData'>
                        <div class="place-list">
                            <div 
                                :class="{'place-tit':true,'active':item.state}"
                                @click='item.state = !item.state'
                                >{{item.palceName}}</div>
                            <div 
                                :class="{'place-box':true,'active':item.state}"
                                >
                                <a-list v-for='(items,index) in item.lotterList' :key='index' :data='items' @click.native='getCookie("gp",items.name)'></a-list>
                            
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import aList from '@/components/list'
import aHeader from '@/components/header'
import { aopencode,aopencodeJC,aopencodeDF,aopencodeGP} from '@/request/api'
import { get} from '@/request/http'
import $ from 'jquery'
import dBanner from "@/components/banner"
export default {
  name: 'index',
  components: {
    aList,
    aHeader,
    dBanner
  },
  data(){
    return {
        placeCurrenState1:true,
        placeCurrenState2:true,
        navCurren:0,
        dataList:[],
        itemJczq:{},
        itemJclq:{},
        itemZd:{},
        currentData1:[],
        currentData2:[],
        otherData:[],
        higtData:[],
        dfCookie:[],
        gpCookie:[],
        CurrentProvinces:'',
            
    }
  },
  methods:{
    hanldNav(idx){
        this.navCurren = idx;
        if (idx==1&&this.otherData == '') {
            this.getOtherData(this.CurrentProvinces)
        }
        if (idx==2&&this.higtData == '') {
            this.getHigtData(this.CurrentProvinces)
        }
    },
    getOtherData(pro){
        aopencodeDF().then(v=>{
            let data = v;
            let regionListName = [];
            let arr = [];
            let i = -1;
            let t = this;
            v.forEach((item,index)=>{
                let obj = {
                    name:item.name,
                    id:item.gid,
                    qi:item.pid,
                    time:item.time.substring(0,10),
                    code:item.code
                }
                if (regionListName.indexOf(item.region)>-1) {
                    arr[i].lotterList.push(obj)
                }else{
                    regionListName.push(item.region);
                    i++;
                    let objs = {
                        palceName:item.region,
                        state:false,
                        lotterList:[],
                    }
                    objs.lotterList.push(obj);
                    arr.push(objs)
                }
            });
            arr.forEach((item,index)=>{
                if (item.palceName == pro) {
                    t.currentData1 = item.lotterList
                }
            })
            this.otherData = arr
        })
    },
    getHigtData(pro){
        aopencodeGP().then(v=>{
            let data = v;
            let regionListName = [];
            let arr = [];
            let i = -1;
            let t = this;
            v.forEach((item,index)=>{
                let obj = {
                    name:item.name,
                    id:item.gid,
                    qi:item.pid,
                    time:item.time.substring(0,10),
                    code:item.code
                }
                if (regionListName.indexOf(item.region)>-1) {
                    arr[i].lotterList.push(obj)
                }else{
                    regionListName.push(item.region);
                    i++;
                    let objs = {
                        palceName:item.region,
                        state:false,
                        lotterList:[],
                    }
                    objs.lotterList.push(obj);
                    arr.push(objs)
                }
            });
            arr.forEach((item,index)=>{
                if (item.palceName == pro) {
                    t.currentData2 = item.lotterList
                }
            })
            this.higtData = arr;

        })
    },
    getDataList(){
        aopencode().then(res => {
            var r = res.rows.row,t=this;
            let arr ={
                '01':'',
                '50':'',
                '03':'',
                '53':'',
                '52':'',
                '51':'',
                '07':'',
                '80':'',
                '83':'',
                '82':'',
                'jczq':'',
                'jclq':'',
                '85':''
            };
            r.forEach(function(item,index){
                let obj = {
                    name:item.gname,
                    id:item.gid,
                    qi:item.pid,
                    time:item.auditdate.substring(0,10),
                    code:item.codes
                }
                arr[item.gid] = obj;
            })
            this.getAopencodeJC(arr);
        }).catch(err =>{
            console.log(err)
        })
    },
    getAopencodeJC(arr1){
        aopencodeJC().then(v=>{
            var r =v;
            let arr = [
                {'01':''},
                {'50':''},
                {'03':''},
                {'53':''},
                {'52':''},
                {'51':''},
                {'07':''},
                {'80':''},
                {'83':''},
                {'82':''},
                {'jczq':''},
                {'jclq':''},
                {'85':''}
            ]
            r.forEach(function(item,index){
                let obj = {
                    name:item.gidName,
                    id:item.gid,
                    qi:item.pid,
                    total:item.zs,
                    yjNum:item.kj,
                    code:'jc'
                }
                arr1[item.gid] = obj;
            })
            let aaas = arr.map((item,index)=>{
                let items = arr1[Object.keys(item)]
                return items;
            })
            this.dataList = aaas
        })
    },
    getCookie(type,name){
        if (type == "df") {
            let dfList = sessionStorage.getItem("dfCookie")||'';
            if (dfList) {
                if (dfList.indexOf(name)<=-1) {
                    sessionStorage.setItem("dfCookie",dfList+','+name);
                }
            }else{
                sessionStorage.setItem("dfCookie",name);
            }
            
            
        }
        if (type == "gp") {
            let gpList = sessionStorage.getItem("gpCookie")||'';
            if (gpList) {
                if (gpList.indexOf(name)<=-1) {
                    sessionStorage.setItem("gpCookie",gpList+','+name);
                }
            }else{
                sessionStorage.setItem("gpCookie",name);
            }
            
            
        }
    },
    getCurrentProvinceName(){
        let myCity = new BMap.LocalCity();
        let t = this;
        myCity.get(result=> {
            $.ajax({  
              url: 'http://api.map.baidu.com/geocoder/v2/?ak=itxK6YP7wPbjXx55yhw7PdQ14HRVawPk&callback=renderReverse&location=' + result.center.lat + ',' + result.center.lng + '&output=json&pois=1',  
              type: "get",  
              dataType: "jsonp",  
              jsonp: "callback",  
              success: function (data) {
                    t.CurrentProvinces = data.result.addressComponent.province.replace('省','')
              },
              error:function(){}
            }); 
        })
    }
    
  },
  created(){
    this.getCurrentProvinceName()
  },
  mounted(){
    let dfList = sessionStorage.getItem("dfCookie");
    let gpList = sessionStorage.getItem("gpCookie");
    this.dfCookie = dfList?dfList.split(','):[]
    this.gpCookie = gpList?gpList.split(','):[]
    this.getDataList();
  }

};

</script>
<style lang="less" scoped>
  @import '../assets/style/index.less';
</style>
